<style lang="less" scoped>
    @import "../../less/_variable.less";

    .header {
        border-bottom: 1px solid #efefef;
    }

    .buying_info {
        background: #fff;
        .b_i_t {
            padding: 0.5rem 0 0.24rem;
            p {
                font-size: 0.32rem;
                color: #222;
                text-align: center;

                margin-top: 0.24rem;
            }
        }
    }

    .b_i_b {
        padding: 0 0.45rem 0.36rem;
        .l_t {
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            font-size: 0.26rem;

            color: #222;
            p {
                font-size: 0.24rem;
                color: #909090;
            }
        }
        .l_c {
            padding: 0.46rem 0;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
        }
    }

    .ok_icon {
        margin: 0 auto;
    }
    .gemsPup{
        background: none;
    }
</style>
<style lang="css" scoped>
    .weui-form-preview:before{
        border:none;
    }
</style>
<template>
    <div>
        <v-header title="拼单结果">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
            <!--<router-link slot="right" to="/home/buying/wait">-->
            <!--<div class="share_icon"></div>-->
            <!--</router-link>-->
        </v-header>
        <div class="main_allScroll">
            <div v-transfer-dom>
                <popup v-model="gemsAlert" height="100%" class="gemsPup">
                    <GemsAlertGet @closeGems="gemsAlert = false" :num="String(gemsNum)"></GemsAlertGet>
                </popup>
            </div>
            <scroller :on-infinite="loadMore ? infinite: getDone" ref="myscroller">

                <div class="buying_info">
                    <div class="b_i_t">
                        <div class="ok_icon"></div>
                        <p>拼单成功</p>
                    </div>
                    <div class="b_i_b">
                        <div class="l_t">
                            <p>商家正在努力发货！请耐心等待！</p>
                        </div>
                        <div class="l_c">
                            <div v-for="item in displayAcquired" class="buying_av_s">
                                <img :src="item.userHeadImgUrl ? item.userHeadImgUrl : 'https://files.shbs008.com/images/headImg/defaultHeadImg.png'" alt="">
                                <!-- v-lazy="{src:item.userHeadImgUrl}"-->
                            </div>
                        </div>
                        <div class="l_b">
                            <button class="buying_btn btns" v-on:click="$router.push({path:'/home'})">再去逛逛</button>
                        </div>
                    </div>
                    <form-preview :body-items="list"></form-preview>
                </div>
                <v-recommmend @updateLoadMore="updateLoadMore" ref="recommend"></v-recommmend>
            </scroller>
        </div>
        <div v-show="shareRedEnvelope" class="homeFloatBanner" :style="{bottom:parseFloat(interactive.statusBarHeight.tabBarHeight)+1.36 + 'rem'}" @click="redPacketClick">
            <img src="../../assets/img/redPacket_icon.png" alt="">
        </div>
    </div>
</template>
<script>
    import {mapActions, mapState} from 'vuex'
    import GemsAlertGet from '../gems/component/getGems'
    import {FormPreview, Popup, TransferDom} from 'vux'
    export default {
        components: {FormPreview, GemsAlertGet, Popup},
        directives: {
            TransferDom
        },
        data() {
            return {
                displayAcquired: [],
                loadMore:false,
                list: [{
                    label: '商品名称',
                    value: ''
                },{
                    label: '订单金额',
                    value: ''
                },{
                    label: '消费金额',
                    value: ''
                },{
                    label: '返现金额',
                    value: ''
                }/*,{
                    label: '获得积分',
                    value: ''
                }*/],
                gemsAlert: false,
                gemsNum: 0,
              shareRedEnvelope : false,
              shareRedEnvelopeId : ''
            };

        },
        activated: function () {
            this.gemsAlert = false
            this.gemsNum = 0
          setTimeout(()=>{
            this.$refs.recommend.getGoods(this.$route.query.code)
          },10)
          this.shareRedEnvelope = false
          this.shareRedEnvelopeId = ''
            this.loadMore = false
          this.getDisplayAcquired();

        },
        methods: {
            updateLoadMore(data){
                this.loadMore = data
            },
            infinite(done){
                global.myLoad = true
                setTimeout(()=>{
                    this.$refs.recommend.getGoods(this.$route.query.code, done)
                },10)
            },
            getDone(){
                this.$refs.myscroller.finishInfinite(2)
            },
            //获取拼单列表
            getDisplayAcquired() {
                this.$ajax.displayAcquiredSuccess({orderId: this.$route.query.orderId})
                    .then((res) => {
                        console.log(res)
                        this.displayAcquired = res.body.content.unionBuyInfoList;
                        this.list[0].value = res.body.content.productName
                        this.list[1].value = res.body.content.orderAmount + '元'
                        this.list[2].value = res.body.content.payAmount + '元'
                        this.list[3].value = res.body.content.profit + '元'
                        this.gemsNum = res.body.content.gemNum
                        if(!!this.gemsNum && this.gemsNum > 0){
                            this.gemsAlert = true
                        }
                        // this.list[4].value = res.body.content.integralValue
                        if(res.body.content.openOrderStatus != 13){
                            console.log(1)
                        }
                      if(res.body.content.haveShareRedEnvelope && res.body.content.haveShareRedEnvelope != null ){
                        this.shareRedEnvelope = res.body.content.haveShareRedEnvelope
                        this.shareRedEnvelopeId = res.body.content.shareRedOrderId
                      }
                    })
            },
          redPacketClick(){
            if(this.isNewNative){
              this.$ajax.activity.geneRateredEnvelope({orderId:this.shareRedEnvelopeId})
                .then((res)=>{
                  let obj = {
                    "title": "铺连铺购物分享派红包",
                    "content": '铺连铺购物分享派红包，快来看看吧！',
                    "imageUrl": 'https://test-files.shbs008.com/static/honeybee2-h5/images/grap_red.png',
                    "shareUrl": window.location.origin + '/#/activity/redPacket?shareRedEnvelopeId=' + this.shareRedEnvelopeId,
                    "originalPage": '/pages/shareRedPacket/index?orderId=' + this.shareRedEnvelopeId
                  }
                  this.Interactive.shareMiniProgram(obj);
                })
            }else{
              this.$ajax.activity.geneRateredEnvelope({orderId:this.shareRedEnvelopeId})
                .then((res)=>{
                  let obj = {
                    "title": "铺连铺购物分享派红包",
                    "content": '铺连铺购物分享派红包，快来看看吧！',
                    "imageUrl": 'https://test-files.shbs008.com/static/honeybee2-h5/images/grap_red.png',
                    "shareUrl": window.location.origin + '/#/activity/redPacket?shareRedEnvelopeId=' + this.shareRedEnvelopeId,
                    "originalPage": '/pages/shareRedPacket/index?orderId=' + this.shareRedEnvelopeId
                  }
                  this.Interactive.shareClick(obj);
                })
            }
          }
        },
        computed: mapState({interactive: state => state.interactive,isNewNative:state => state.router.isNewNative}),

    }
</script>
